import React, { Component } from 'react';
import './index.css';

import HeaderInp from './components/HeaderInp/index.jsx';
import MainList from './components/MainList/index.jsx';
import FooterCom from './components/FooterCom/index.jsx';

export default class index extends Component {
  state = {
    list: [
      {
        id: 1,
        title: '吃饭',
        done: true
      },
      {
        id: 2,
        title: '睡觉',
        done: false
      }
    ]
  };
  //  状态在哪里，操作状态的方法在哪里
  addTodo = (obj) => {
    this.setState({
      list: [obj, ...this.state.list]
    });
  };

  updateTodoItem = (done, id) => {
    let list = this.state.list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          done
        };
      }
      return item;
    });

    this.setState({
      list
    });
  };
  updateAllItem = (done) => {
    let list = this.state.list.map((item) => {
      return {
        ...item,
        done
      };
    });

    this.setState({
      list
    });
  };

  deleteTodoItem = (id) => {
    let list = this.state.list.filter((item) => item.id !== id);

    this.setState({
      list
    });
  };

  clearAllItem = () => {
    let list = this.state.list.filter((item) => item.done === false);

    this.setState({
      list
    });
  };

  render() {
    return (
      <div id="root">
        <div className="todo-container">
          <div className="todo-wrap">
            <HeaderInp addTodo={this.addTodo}></HeaderInp>
            <MainList
              list={this.state.list}
              updateTodoItem={this.updateTodoItem}
              deleteTodoItem={this.deleteTodoItem}
            ></MainList>
            <FooterCom
              list={this.state.list}
              updateAllItem={this.updateAllItem}
              clearAllItem={this.clearAllItem}
            ></FooterCom>
          </div>
        </div>
      </div>
    );
  }
}
